import React, { useState } from 'react';

let Child = (props) => {
  console.log('Child 组件被执行了');
  return (
    <div>
      <h1>Child - {props.name}</h1>
      <button onClick={()=>{
        props.changeName('梦龙')
      }}>修改 name</button>
    </div>
  );
}

Child = React.memo(Child)



const App = () => {

  const [count, setCount] = useState(100)

  const [name,setName] = useState('小张')

  /*
    子组件给父组件传值，
    1. 在父组件中定义接收的方法 changeName
    2. 在使用子组件的时候将 changeName 传递过去
    3. 在子组件中调用该函数
    4. 在修改 count 值之后，会导致 App 组件被重新渲染
    5. 那么此时发现 Child 组件中有使用 App 中定义 changeName
    6. 所以会导致 Child 又会被 count 所影响
  */

  const changeName = (val)=>{
    setName(val)
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>

      <Child name={name} changeName={changeName} />
    </div>
  );
};

export default App;
